<template>
  <div style="width: 100%;height: 100%;">
    <div class="lineChart" ref="lineChart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myChart: null,
      chartOptions: {
        legend: {
          textStyle: {
            color: "#4c9bfd", // 图例文字颜色
          },
          right: "10%", // 距离右边10%
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 边框颜色
          containLabel: true, // 包含刻度文字在内
        },
        // 提示窗口设置
        tooltip: {
          trigger: "axis", // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
          showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          hideDelay: 100, // 隐藏延迟，单位ms
          transitionDuration: 0.4, // 动画变换时间，单位s
          backgroundColor: "rgba(0,0,0,0.7)", // 提示背景颜色，默认为透明度为0.7的黑色
          borderColor: "#333", // 提示边框颜色
          borderRadius: 4, // 提示边框圆角，单位px，默认为4
          borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
          padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              // 直线指示器样式设置
              color: "#48b",
              width: 2,
              type: "solid",
            },
            shadowStyle: {
              // 阴影指示器样式设置
              width: "auto", // 阴影大小
              color: "rgba(150,150,150,0.3)", // 阴影颜色
            },
          },
          textStyle: {
            color: "#eee", // 单线条颜色
          },
        },
        // 横纵标
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisTick: {
            show: false, // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
          boundaryGap: false, // 去除轴内间距
        },
        // 纵坐标
        yAxis: {
          type: "value",
          axisTick: {
            show: false, // 去除刻度
          },
          axisLabel: {
            color: "#4c9bfd", // 文字颜色
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a", // y轴分割线颜色
            },
          },
        },
        // 展示方式填充
        color: ["#00f2f1", "#ed3f35"],
        series: [
          {
            name: "新增粉丝",
            data: [
              820,
              932,
              901,
              934,
              1290,
              1330,
              1320,
              934,
              1290,
              1330,
              1320,
              1730,
            ],
            type: "line",
            // 折线修饰为圆滑
            smooth: true,
          },
          {
            name: "新增游客",
            data: [
              100,
              331,
              200,
              123,
              233,
              543,
              400,
              934,
              1290,
              1330,
              1320,
              1620,
            ],
            type: "line",
            smooth: true,
          },
        ],
      },
    };
  },
  mounted() {
    this.createEchart();
  },
  methods: {
    createEchart() {
      this.myChart = this.$echarts
        .init(this.$refs.lineChart)
        .setOption(this.chartOptions);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.lineChart {
  width: 100%;
  height: 100%;
}
</style>
